<template>
  <u-card margin="10rpx 0rpx">
    <template #head>
      <view class="title">
        <view>
          <text class="u-font-32 u-text-color">{{ info.name }}</text>
          <text class="u-font-32 u-text-color">{{ info.userName }}</text>
        </view>
        <view>
          <u-tag
            class="created-user"
            v-if="createdUserId === info.userId"
            text="项目创建人"
            type="success"
            shape="circle"
            border-color="transparent"
          ></u-tag>
          <u-tag
            v-if="info.accountProjectStatus"
            text="启用"
            type="success"
            shape="circle"
            border-color="transparent"
          />
          <u-tag
            v-else
            text="停用"
            type="error"
            shape="circle"
            border-color="transparent"
          />
        </view>
      </view>
    </template>
    <template #body>
      <view>
        <text>角色：</text>
        <view
          class="role-list"
          v-html="setRoleTableName(info.userRoleList)"
        ></view>
      </view>
      <view class="u-m-t-20">
        <text>备注：</text>{{ info.remark ? info.remark : '无' }}
      </view>
    </template>
    <template #foot>
      <view class="u-text-right">
        <u-button
          class="u-btn-text"
          @click="showEditProjectUser(info)"
          v-if="hasPermission(['CTMS-PROJECTCENTER-SY-CY-AUTH'])"
        >
          <text class="u-type-primary">角色授权</text></u-button
        >
        <u-button
          class="u-btn-text u-m-l-20"
          @click="updateStatus(info)"
          :loading="statusLoading"
          v-if="hasPermission(['CTMS-PROJECTCENTER-SY-CY-OPEN'])"
        >
          <text
            :class="
              !statusLoading
                ? info.accountProjectStatus
                  ? 'u-type-error'
                  : 'u-type-primary'
                : ''
            "
            >{{ info.accountProjectStatus ? '停用' : '启用' }}</text
          ></u-button
        >
      </view>
    </template>
  </u-card>
</template>
<script lang="ts" setup>
import { toRefs } from 'vue';
import { roleMarksMap } from '../index';
import { changeProjectUserStatus } from '@/api/modules/common';
import { usePermission } from '@/hooks/usePermission';
const { hasPermission } = usePermission();
const props = defineProps<{
  info: any;
  createdUserId: any;
  projectId: string;
}>();

const emits = defineEmits(['reload', 'changeUser']);
const { info } = toRefs(props);

const setRoleTableName = (list: any[]) => {
  if (!list) {
    return '';
  }
  const arr = list.map((item) => {
    let str = item.roleName;
    if (item.roleClass === 2) {
      str = '【自】' + str;
    }
    if (item.roleMark) {
      str = '【' + roleMarksMap[item.roleMark - 1] + '】' + str;
    }

    return str;
  });
  const arrStr = arr.join('、').replace('【自】', '!_!').split('!');
  if (arrStr.length > 1) {
    const strArr = arrStr.map((item) => {
      if (item === '_') {
        return `<span style="color:#389e0d">【自】</span>`;
      }
      return item;
    });
    return `<p>${strArr.join('')}</p>`;
  }
  return `<p>${arr.join('、')}</p>`;
};
const statusLoading = ref(false);
// 停用启用
const updateStatus = async (record: any) => {
  statusLoading.value = true;
  if (record.accountProjectStatus) {
    uni.showModal({
      title: '提示',
      content:
        '若该用户正在操作系统，操作不会保存，并强制退出登录。您确定要禁用该用户吗？',
      confirmText: '确认',
      cancelText: '取消',
      success: async (res) => {
        if (res.confirm) {
          updateStatusConfirm(record);
        }
      },
      // 成功失败都会执行的方法
      complete: () => {
        statusLoading.value = false;
      },
    });
  } else {
    statusLoading.value = false;
    updateStatusConfirm(record);
  }
};
const updateStatusConfirm = (record: any) => {
  statusLoading.value = true;
  changeProjectUserStatus({
    accountId: record.accountId,
    projectId: props.projectId,
    availableFlag: record.accountProjectStatus ? 0 : 1,
  })
    .then(() => {
      statusLoading.value = false;
      emits('reload');
    })
    .catch(() => {
      statusLoading.value = false;
    });
};
// 编辑项目成员
const showEditProjectUser = (record: any) => {
  emits('changeUser', record);
};
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-between;
}
.role-list {
  display: inline-block;
}
.created-user {
  margin-right: 10rpx;
}
</style>
